<template>
	<!-- 头部 -->
	<div id="gdetail">
		<div class="detail-title">
			<div class="title-cont">
				<div class="to-back"><span class="iconfont">&#xe601;</span></div>
				<div class="title-list">
					<ul>
						<li ><router-link :to="'/gdetail?proId='+proId" >商品</router-link></li>
						<li ><router-link :to="'/gdetail/gdetail?proId='+proId">详情</router-link></li>
						<li ><router-link :to="'/gdetail/gcomment?proId='+proId">评论</router-link></li>
					</ul>
				</div>
				<div class="to-home" @click="login"><a href="/index"><span class="iconfont">&#xe60c;</span></a></div>
			</div>
		</div>
		
		<router-view/>
		
		<!-- 菜单条 -->
		<div class="bottom-menu">
			<div class="menu-left">
				<ul>
					<li class="kefu"><span class="iconfont">&#xe62a;</span> <span class="menu-txt">在线客服</span></li>
					<li @click="shoucang" :class="isCollect?'scactive':'' "><span class="iconfont">&#xe658;</span> <span class="menu-txt">收藏</span></li>
					<li><span class="iconfont">&#xe62d;</span> <span class="menu-txt">购物车</span></li>
				</ul>
			</div>
			<div class="add-car" @click="addCar">加入购物车</div>
		</div>
	</div>
	
	
</template>

<script>
	export default{
		name:'App',
		data(){
			return{
				isCollect:false,
				userId:0,
				token:0,
				proId : this.$route.query.proId
			}
		},
		methods:{
			addCar(){
				this.axios({
				    method:'get',
				    url:'http://115.28.137.176:8094/cart/addCart',
				 //    headers:{
					// 'Content-Type': 'application/json;charset=UTF-8',
				 //     'token':this.token
				 //    },
				    params:{
						"userId":this.userId,
				        "proId":this.proId,
						
						
				    }
				}).then((res)=>{
					console.log(res);
				}).catch(()=>{
				    console.log('网络错误')
				});
				
		},
		shoucang(){
			this.axios({
			    method:'get',
			    url:'http://115.28.137.176:8094//collect/isCollect',
			    // headers:{
			    //   "token":"1111"
			    // },
			    params:{
					"userId":"2",
			        "proId":this.proId
					
			    }
			}).then((res)=>{
				if(res.data.data=="取消收藏成功"){
					this.isCollect=false
				}
				else if(res.data.data=="收藏成功"){
					this.isCollect=true
				}
			}).catch(()=>{
			    console.log('网络错误')
			});
			
	
		},
		
		login(){
			// this.axios({
			//     method:'get',
			//     url:'http://115.28.137.176:8082/userLogAndReg/log',
			//     // headers:{
			//     //   "token":"1111"
			//     // },
			//     params:{
			// 		"nameOrTel":"18892802679",
			// 		"password":"123456"
					
			//     }
			// }).then((res)=>{
			// 	this.userId=res.data.userInfo.userId;
			// 	this.token=res.data.token
			// }).catch(()=>{
			//     console.log('网络错误')
			// });
			
		}
		
		},
		mounted() {
			this.axios({
			    method:'get',
			    url:'http://115.28.137.176:8094/cart/countCart',
			    // headers:{
			    //   "token":"1111"
			    // },
			    params:{
					"userId":this.userId,
					
			    }
			}).then((res)=>{
				console.log(res);
			}).catch(()=>{
			    console.log('网络错误')
			});
			
			// 是否收藏
			this.axios({
			    method:'get',
			    url:'http://115.28.137.176:8094/seePro/collect',
			    // headers:{
			    //   "token":"1111"
			    // },
			    params:{
					"userId":"2",
			        "proId":this.proId
					
			    }
			}).then((res)=>{
				if(res.data.data=="已收藏"){
					this.isCollect=true
				}
				else if(res.data.data=="未收藏"){
					this.isCollect=false
				}
				console.log(res)
			}).catch(()=>{
			    console.log('网络错误')
			});
		}
	
	
	}
	
	
</script>

<style lang="less">
	@font-face {
	  font-family: 'iconfont';
	  src: url('../../assets/font/iconfont.eot');
	  src: url('../../assets/font/iconfont.eot?#iefix') format('embedded-opentype'),
	      url('../../assets/font/iconfont.woff2') format('woff2'),
	      url('../../assets/font/iconfont.woff') format('woff'),
	      url('../../assets/font/iconfont.ttf') format('truetype'),
	      url('../../assets/font/iconfont.svg#iconfont') format('svg');
	}
	
	.iconfont {
	  font-family: "iconfont" !important;
	  font-size: 16px;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	
	@baseFontSize:20px;
	@baseSize:20;
	
	.px2rem(@name,@px){
	    @{name}:@px / @baseSize /2 * 1rem;
	}
	
	*{
		margin: 0;
		padding: 0;
	}
	
	a{
		color: #2b2b2b;
	}
	html,body{
		height: 100%;
	}
	
	.detail-title{
		.px2rem(width,750);
		.px2rem(height,90);
	}
	.title-cont{
		.px2rem(width,690);
		height:100%;
		.px2rem(line-height,90);
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		.px2rem(font-size,25);
	}
	
	.title-list{
		ul{
			.px2rem(width,260);
			display: flex;
			justify-content: space-between;
			li{
				list-style: none;
				a{
					// color: #2b2b2b;
					text-decoration: none;
				}
			}
		}
	}
	
	.goods-show-img{
		.px2rem(width,750);
		.px2rem(height,750);
		img{
			.px2rem(width,750);
			.px2rem(height,750);
		}
	}

	
	.goods-msg{
		.px2rem(width,750);
		.px2rem(height,135);
		color: #FFFFFF;
		background: url(../../../public/gg-bg.png);
		background-size: cover;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.goods-msg-txt{
		.px2rem(height,100);
		.px2rem(width,715);
		margin: 0 auto;
		.px2rem(font-size,20);
	}
	
	.now-price-title{
		.px2rem(font-size,30);
	}
	.now-price{
		.px2rem(font-size,35);
	}
	.pr-price{
		text-decoration: line-through;
	}
	.goods-name-area{
		.px2rem(height,120);
		.px2rem(width,750);
		display: flex;
		align-items: center;
	}
	.goods-name-cont{
		.px2rem(height,75);
		.px2rem(width,715);
		margin: 0 auto;
		display: flex;
	}
	.goods-name{
		flex: 1;
		.px2rem(font-size,30);
	}
    .goods-name-txt{
		.px2rem(width,475);
		.px2rem(letter-spacing,3)
	}
	.to-share{
		.px2rem(width,165);
		border-left: 1px solid #f1f1f1;
		text-align: center;
		color: #ee714b;
	}
	.get-voucher{
		.px2rem(height,60);
		.px2rem(width,750);
		.px2rem(margin-top,50);
	}
	.voucher-cont{
		.px2rem(width,715);
		height: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.voucher-txt{
		.px2rem(width,50);
		.px2rem(height,30);
		background: #e94715;
		.px2rem(border-radius,5);
		.px2rem(font-size,15);
		color:#fdefe7;
		text-align: center;
	}
	.kongbai{
		.px2rem(width,750);
		.px2rem(height,15);
		background: #eeeeee;
	}
	.pinglun{
		.px2rem(width,750); 
		.px2rem(height,560);
	}
	.pinglun-title{
		.px2rem(width,750);
		.px2rem(height,80);
		
	}
	.pinglun-txt{
		.px2rem(width,715);
		.px2rem(height,80);
		.px2rem(line-height,80);
		.px2rem(font-size,25);
		
		margin: 0 auto;
	}
	.pinglun-area{
		border-top: 1px solid #f5f5f5;
		.px2rem(width,750);
		.px2rem(min-height,185);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.pinglun-cont{
		.px2rem(width,750);
		display: flex;
		justify-content: space-around;
	}
	.touxiang{
		.px2rem(width,75);
		.px2rem(height,75);
		.px2rem(border-radius,37.5);
		.px2rem(margin-left,10);
		overflow: hidden;
		img{
			.px2rem(width,75);
			.px2rem(height,75);
		}
	}
	.pinglun-neirong{
		.px2rem(font-size,30);
		.px2rem(margin-left,20);
		flex: 1;
	}
	.pinglun-time{
		color: #aaaaaa;
		.px2rem(font-size,25);
		.px2rem(margin-right,30);
	}
	.pinglun-wd{
		.px2rem(margin-top,10);
	}
	.all-pinglun{
		.px2rem(width,183);
		.px2rem(height,48);
		.px2rem(font-size,25);
	   .px2rem(line-height,48);
		border: 1px solid #f18766;
		text-align: center;
		margin: 0 auto;
		.px2rem(margin-top,25);
		a{
			color: #e83d08;
			text-decoration: none;
		}
	}
	.tuijian-title{
		.px2rem(width,750);
		.px2rem(height,80);
	}
	.tuijian-txt{
		.px2rem(width,715);
		.px2rem(height,80);
		.px2rem(line-height,80);
		.px2rem(font-size,25);
		margin: 0 auto;
	}
	.tuijian-list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.tuijian-area{
		.px2rem(margin-top,10);
		.px2rem(width,373);
		.px2rem(height,500);
		background: #ffffff;
        color: #e83a10;
		img{
			.px2rem(width,373);
			.px2rem(height,375);
		}
	}
	.tuijian-name{
		.px2rem(width,353);
		.px2rem(height,70);
		.px2rem(line-height,70);
		margin: 0 auto;
		.px2rem(font-size,25);
		color:#585858;
	}
	.tuijian-price{
		.px2rem(width,353);
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		.px2rem(font-size,25);
	}
	.tj-price{
		color: #e73400;
		font-weight: bold;
	}
	.to-la{
		.px2rem(margin-top,50);
		.px2rem(width,750);
		.px2rem(height,175);
		text-align: center;
		.px2rem(font-size,25);
	}
	.bottom-menu{
		.px2rem(width,750);
		.px2rem(height,105);
		display: flex;
		position: fixed;
		bottom: 0;
		background: #ffffff;
		
	}
	
	.menu-left{
		.px2rem(width,450);
		.px2rem(height,105);
		ul{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-around;
			li{
				.px2rem(height,105);
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				.px2rem(font-size,35);
			}
		}
	}
	
	.menu-txt{
		.px2rem(font-size,25);
	}
	.add-car{
		.px2rem(width,300);
		.px2rem(height,105);
		background: #e94715;
		color: white;
		text-align: center;
		.px2rem(line-height,105);
		.px2rem(font-size,35);
	}
	.router-link-exact-active{
		
			color: #eb5527;
		
	}
	.scactive{
		color: #eb5527;
				
	}
	.kefu{
		color: #93e3ff;
	}
	.user-name{
		font-weight: bold;
	}
</style>
